<template>
	<el-form
		ref="form"
		class="plr-1"
		label-position="top"
		label-width="40px"
		:model="form"
		:disabled="saving"
	>
		<el-upload
			drag
			multiple
			list-type="picture"
			:headers="{ token }"
			:before-upload="beforeUpload"
			:file-list.sync="form.images"
			:data="fileData"
			:on-progress="uploadProgress"
			:on-error="uploadError"
			:on-success="uploadSuccess"
			:action="`${baseUrl}/index/uposs`"
			accept="image/*"
			:show-file-list="false"
		>
			<i class="el-icon-upload" />
			<div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
		</el-upload>
		<ul class="images">
			<li v-for="(item, index) in form.images" :key="index" class="images-item">
				<span
					class="el-icon-close remove"
					@click="handleRemove(index)"
					v-if="item.status != 'uploading'"
				/>
				<div class="images-item__show">
					<el-image
						class="img"
						:src="item.url"
						fit="contain"
						:preview-src-list="previewList"
					/>
					<div class="images-item__show--right">
						<div class="ellipsis">{{ item.name }}</div>
						<el-progress
							v-if="item.status == 'uploading'"
							:stroke-width="2"
							:percentage="item.percentage"
							:format="percentageFormat"
						/>
					</div>
				</div>
				<el-form-item
					label="外链"
					inline-message
					class="mt-1"
					:prop="`images.${index}.link`"
					:rules="rules.link"
				>
					<el-input
						v-model="item.link"
						placeholder="http://xxx.com 或 https://xxx.com"
						clearable
					/>
				</el-form-item>
				<el-form-item prop="click_type" label="点击跳转">
					<cl-select v-model="form.click_type" filterable style="width: 100%">
						<el-option :value="1" label="是" />
						<el-option :value="2" label="否" />
					</cl-select>
				</el-form-item>
				<el-form-item prop="mp_query" label="二跳页面参数">
					<div class="tips" style="line-height: normal;">默认不填为当前模板页面参数</div>
					<!-- <el-input v-model="form.mp_query" placeholder="请输入小程序页面参数" /> -->
					<cl-select v-model="form.mp_query" style="width: 100%" filterable clearable>
						<el-option
							v-for="item in selfAdList"
							:key="item.id"
							:value="item.id"
							:label="item.name"
						/>
					</cl-select>
				</el-form-item>
				<el-form-item prop="is_dialog" label="是否弹窗">
					<cl-select v-model="form.is_dialog" filterable style="width: 100%">
						<el-option :value="1" label="是" />
						<el-option :value="2" label="否" />
						<el-option :value="3" label="自动弹窗" />
					</cl-select>
				</el-form-item>
				<el-form-item prop="dialog_content" label="弹窗内容">
					<el-input v-model="form.dialog_content" placeholder="" />
				</el-form-item>
			</li>
		</ul>
	</el-form>
</template>
<script>
import { baseUrl } from "@/config/env";
import dayjs from "dayjs";
import { mapGetters } from "vuex";

export default {
	props: {
		saving: Boolean,
		view: {
			type: Object,
			default: () => ({})
		},
		selfAdList: {
			type: Array,
			default: () => [{}]
		}
	},
	data() {
		return {
			baseUrl,
			form: this.view.options,
			fileData: {},
			rules: {
				link: [{ type: "url", message: "链接格式不正确" }]
			}
		};
	},
	computed: {
		...mapGetters(["token"]),
		previewList() {
			const { images } = this.form;
			return images?.map?.(v => v.url);
		}
	},
	methods: {
		handleRemove(index) {
			this.form.images.splice(index, 1);
		},
		percentageFormat(percentage) {
			return this.toFixed(percentage) + "%";
		},
		// 上传文件
		beforeUpload(file) {
			this.fileData.name = file.name;
			this.fileData.dirname = "upload/" + dayjs().format("YYYY-MM-DD");
			this.fileData.type = 'ad_template'
		},
		// 文件上传时
		uploadProgress(event, file, fileList) {
			this.form.images = fileList;
		},
		// 上传成功
		uploadSuccess(res, file, fileList) {
			this.form.images = fileList.map(({ response = {}, raw, ...v }) => {
				return {
					name: v.name,
					status: v.status,
					percentage: v.percentage,
					url: response.data || v.url,
					link: v.link || ""
				};
			});
			this.$message.success("上传成功");
			// this.view.options = this.form;
		},
		// 上传失败
		uploadError(err) {
			const error = JSON.parse(err.message);
			this.$message.error(error.msg);
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-upload,
	.el-upload-dragger {
		width: 100%;
	}
	.el-upload-dragger {
		height: 120px;
		.el-icon-upload {
			margin-top: 15px;
		}
	}
}
.images {
	padding: 0;
	&-item {
		border: solid 1px #e0e0e0;
		border-radius: 3px;
		padding: 10px 8px 14px;
		margin: 10px 0;
		position: relative;
		.remove {
			position: absolute;
			right: 10px;
			top: 10px;
			color: grey;
			cursor: pointer;
		}
		&__show {
			display: flex;
			align-items: center;
			.img {
				width: 100px;
				height: 80px;
				border: solid 1px #e0e0e0;
				border-radius: 3px;
			}
			&--right {
				flex: 1;
				overflow: hidden;
				padding-left: 10px;
			}
		}
		::v-deep .el-form-item {
			margin-bottom: 0;
		}
	}
}
</style>
